<template>
  <div class='hrTargetManage' >
      <el-row class='first-title'>
        <div class="lf">
          <h3>指标业务单位</h3>
        </div>
        <search-box class="search" @getValue="getSearchText"></search-box>
      </el-row>
      <el-row class="third-card">
          <div class="table-container">
            <div class="handle-table">
                <div class="left">
                    <el-button-group>
                        <el-button icon="plus" @click="hrCreateClick">
                            创建
                        </el-button>
                        <el-button icon="delete" type="danger" @click="hrDeleteClick">
                            删除
                        </el-button>
                    </el-button-group>
                </div>
            </div>
            <el-table
                :data="hrTable.hrTableData"
                style="width: 100%"
                :row-class-name="handleRowClass"
                @selection-change='tableSelectionChange'
                >
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    v-for="column in hrTable.hrColumns"
                    :key='column.prop'
                    :prop='column.prop'
                    :label='column.label'
                    :width='column.width'
                    :formatter="column.formatter">
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="160">
                    <template scope="scope">
                        <el-button
                            class="successBt"
                            @click="hrDetailClick(scope.row)"
                            type="text"
                            size="small">
                            详情
                        </el-button>
                        <el-button
                            @click="hrEditClick(scope.row)"
                            type="text"
                            size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationDiv">
                <my-pagination
                    :sizeChange='handleSizeChange'
                    :currentChange='handleCurrentChange'
                    :totals='pagination.total'>
                </my-pagination>
            </div>
         </div>
      </el-row>
      <el-dialog
        title="详情"
        :visible.sync="lookDialog.lookDialogVisible"
        width="50%"
        :lock-scroll='false'
        class="lookModal">
        <div>
            <ul>
                <li>
                    <div class="title">编号:</div>
                    <div class="value">{{lookDialog.lookForm.setid}}</div>
                </li>
                <li>
                    <div class="title">名称:</div>
                    <div class="value">{{lookDialog.lookForm.descrshort}}</div>
                </li>
                <li>
                    <div class="title">全称:</div>
                    <div class="value">{{lookDialog.lookForm.descr}}</div>
                </li>
                <li>
                    <div class="title">排序:</div>
                    <div class="value">{{lookDialog.lookForm.order_number}}</div>
                </li>
                <li>
                    <div class="title">是否有效:</div>
                    <div class="value">{{lookDialog.lookForm.enable === 1? '是':'否'}}</div>
                </li>
            </ul>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="lookDialog.lookDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :title="editDialog.title"
        :visible.sync="editDialog.editDialogVisible"
        width="50%"
        :lock-scroll='false'
        class="editModal">
        <div class="editModalDiv">
           <el-form ref="form" :model="editDialog.editForm" label-width="80px">
                <el-form-item label="编号">
                    <el-input v-model="editDialog.editForm.setid"></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="editDialog.editForm.descrshort"></el-input>
                </el-form-item>
                <el-form-item label="全称">
                    <el-input v-model="editDialog.editForm.descr"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="editDialog.editForm.order_number"></el-input>
                </el-form-item>
                <el-form-item label="是否有效">
                    <el-checkbox v-model="editDialog.editForm.enable"></el-checkbox>
                </el-form-item>
           </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="editHrSure">确 定</el-button>
            <el-button @click="editDialog.editDialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
    import Vue from 'vue'
    import myPagination from '@/components/public/pagination'
    import searchBox from '@/components/public/search-box'
    import {
        MessageBox,
        Message,
        Button,
        ButtonGroup,
        Switch,
        Select,
        Input,
        Col,
        Row,
        Dialog,
        Checkbox,
        Radio,
        RadioGroup,
        RadioButton,
        Option,
        Table,
        TableColumn,
        Form,
        FormItem} from 'element-ui'
    // Vue.use(MessageBox)
    // Vue.use(Message)
    Vue.use(Button)
    Vue.use(ButtonGroup)
    Vue.use(Switch)
    Vue.use(Select)
    Vue.use(Input)
    Vue.use(Col)
    Vue.use(Row)
    Vue.use(Dialog)
    Vue.use(Checkbox)
    Vue.use(Radio)
    Vue.use(RadioGroup)
    Vue.use(RadioButton)
    Vue.use(Option)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Form)
    Vue.use(FormItem)

    export default {
      data() {
        return {
          controlTableType:'',
          searchText:'',
          hrTable:{
              hrTableData:[],
              hrColumns:[
                {
                    prop: "setid",
                    label: "编号",
                    width: "120"
                },
                {
                    prop: "descrshort",
                    label: "名称",
                    width: "120"
                },
                {
                    prop: "descr",
                    label: "全称",
                    width: ""
                },
                {
                    prop: "order_number",
                    label: "排序",
                    width: "120"
                },
                {
                    prop: "enable",
                    label: "是否有效",
                    width: "120",
                    formatter:function(r,c,v){
                        return v === 1? '是': '否'
                    }
                }
              ],
              tableSelections:[],
              hrRowData:{}
          },
          addTable:{
              addTableDataAll:[],
              addColumnsAll:[
                  {
                      prop:'year1',
                      label:'2015'
                  },
                  {
                      prop:'year2',
                      label:'2016'
                  },
                  {
                      prop:'year3',
                      label:'2017'
                  }
              ],
              addTableOffice:[],
              addColumnsOffice:[
                {
                    prop: "number",
                    label: "编号",
                    width: ""
                },
                {
                    prop: "china_name",
                    label: "名称",
                    width: "120"
                },
                {
                    prop: "type",
                    label: "分类",
                    width: "120"
                },
                {
                    prop: "unit",
                    label: "单位",
                    width: "120"
                },
                {
                    prop: "keep_valid",
                    label: "保留小数位",
                    width: "120"
                }
              ]
          },
          pagination:{
              total:0,
              pageSize:10,
              pageNum:1
          },
          editDialog:{
              editDialogVisible:false,
              editForm:{
              	setid:'',
              	descrshort:'',
              	descr:'',
              	order_number:'',
              	enable:false,
              },
              title:'创建'
          },
          lookDialog:{
              lookDialogVisible:false,
              lookForm:{}
          }
        }
      },
      methods: {
        clearEditForm:function(){
            for(var key in this.editDialog.editForm){
                this.editDialog.editForm[key] = ''
            }
            this.editDialog.editForm.enable = false
        },
        tableSelectionChange:function(selection){
            this.hrTable.tableSelections = selection
        },
        confirmModal:function(title,content,type,sureCB,cancelCB){
            MessageBox.confirm(content, title, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: type? type: 'warning'
            }).then(() => {
                if(sureCB){
                    sureCB()
                }
            }).catch(() => {
                if(cancelCB){
                    cancelCB()
                }
            });
        },
        // 获取表格数据
        getTableData:function(){
            var params = {
                search:this.searchText,
                pageSize:this.pagination.pageSize,
                pageNum:this.pagination.pageNum
            }
            this.ajaxPost('/normBusiness/queryList',params,this.getTableDataCB)
        },
        getTableDataCB:function(res){
            if (res.data.status === 1) {
                this.hrTable.hrTableData = res.data.datas.showList
                this.pagination.total = res.data.total
            }
        },
        // 创建表格数据
        hrCreateClick:function(){
             this.editDialog.editDialogVisible = true
             this.clearEditForm()
             this.editDialog.title = '创建'
             this.controlTableType = 'create'
        },
        // 删除表格数据
        hrDeleteClick:function(row){
            if(!this.hrTable.tableSelections.length){
                return Message.error('请选择要删除的项!')
            }
            this.confirmModal('提示','确定要删除吗?','',this.hrDeleteSure)
        },
        hrDeleteSure:function(){
            var ids = []
            for(var i=0; i<this.hrTable.tableSelections.length; i++){
                ids.push(this.hrTable.tableSelections[i].id)
            }
            this.ajaxPost('/normBusiness/deleteHrNorm',{ids},this.hrDeleteSureCB)
        },
        hrDeleteSureCB:function(res){
            if(res.data.status === 1){
                Message.success('删除成功!')
                this.getTableData()
            }
        },
        // 查看表格数据
        hrDetailClick:function(row){
            this.controlTableType = 'look'
            this.ajaxPost('/normBusiness/queryDetail',{id:row.id},this.hrDetailClickCB)
        },
        hrDetailClickCB:function(res){
            if(res.data.status === 1){
                if(this.controlTableType === 'look'){
                    this.lookDialog.lookDialogVisible = true
                    this.lookDialog.lookForm = res.data.datas.normBusinessDetail
                }else if(this.controlTableType === 'edit'){
                    this.editDialog.title = '编辑'
                    this.editDialog.editDialogVisible = true
                    this.editDialog.editForm = res.data.datas.normBusinessDetail
                    this.editDialog.editForm.enable = this.editDialog.editForm.enable === 1? true: false
                }
            }
        },
        // 编辑表格数据
        hrEditClick:function(row){
            this.controlTableType = 'edit'
            this.ajaxPost('/normBusiness/queryDetail',{id:row.id},this.hrDetailClickCB)
        },
        editHrSure:function(){
            var params = JSON.parse(JSON.stringify(this.editDialog.editForm))
            params.enable = params.enable? 1: 0
            this.ajaxPost('/normBusiness/modifyNormBus',params,this.editHrSureCB)
        },
        editHrSureCB:function(res){
            if(res.data.status === 1){
                this.editDialog.editDialogVisible = false
                if(this.controlTableType === 'create'){
                    Message.success('创建成功!')
                }else if(this.controlTableType === 'edit'){
                    Message.success('编辑成功!')
                }
                this.getTableData()
            }
        },
        handleSizeChange:function(val){
            this.pagination.pageSize=val
            this.getTableData()
        },
        handleCurrentChange:function(val){
            this.pagination.pageNum=val
            this.getTableData()
        },
        getSearchText:function(text){
            this.searchText = text.trim();
            var params = {
                search:this.searchText,
                pageSize:this.pagination.pageSize,
                pageNum:1
            };
            this.ajaxPost('/normBusiness/queryList',params,this.getTableDataCB);
        },
        ajaxPost:function(url,params,callback){
            var self = this;
            this.Axios.Post(url,params)
                .then(function(res){
                    if(callback){
                        callback(res,self)
                    }
                })
        }
      },
      computed:{
      },
      filters:{
      },
      mounted: function () {
        this.getTableData()
      },
      components: {
          myPagination,
          searchBox
      },
      watch:{
      }
    }
</script>

<style scoped> 
    .hrTargetManage .first-title h3{
        font-size: 24px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: 500;
        line-height: 1.1;
    }
    .hrTargetManage .first-title .search{
        float: right;
        margin-top: 15px;
    }
    .hrTargetManage .second-sec{
        position: relative;
        border-radius: 3px;
        background: #ffffff;
        border-top: 3px solid #d2d6de;
        margin-bottom: 50px;
        width: 100%;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-top-color: #00a65a;
        color:#444;
        font-family: "Microsoft YaHei",museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
    }
    .hrTargetManage .table-container{
        position: relative;
        border-radius: 3px;
        background: #ffffff;
        border-top: 3px solid #d2d6de;
        margin-bottom: 20px;
        width: 100%;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-top-color: #00a65a;
        background-color:#fff;
        padding: 0 10px;
        min-height: 400px;
    }
    .hrTargetManage .handle-table{
        clear: both;
        padding:20px 20px 30px 20px;
        border-bottom: 1px solid #dfe6ec;
    }
    .hrTargetManage .selectSet{
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      position: relative;
      clear: both;
      
    }
    .hrTargetManage .selectSet .default{
      float: left;
      background-color: #f4f4f4;
      color: #444;
      padding: 6px 12px;
      border: 1px solid #ddd;
      border-radius: 3px;
      position: relative;
      z-index:1;
    }
    .hrTargetManage .selectSet .alt{
        margin-right:-1px;
        
    }
    .hrTargetManage .selectSet a:hover{
      z-index:4;  
      color: #333;
      background-color: #e6e6e6;
      border-color: #adadad;
    }
    .hrTargetManage .selectSet .alt{
        margin-right:-1px;
    }

    .hrTargetManage .selectSet .default:first-child:not(:last-child){
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        
    }
    .hrTargetManage .selectSet .default:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .hrTargetManage .third-card .collapse-card .box-title{
        display: inline-block;
        font-size: 18px;
        color: #444;
        font-weight: 500;
        margin: 0;
        line-height: 1;
    }
    .hrTargetManage .third-card .collapse-card .collapse-container {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor:pointer;
    }
    .hrTargetManage .third-card .collapse-card  .collapse {
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 0px;
        padding: 5px;
        font-size: 12px;
        background: transparent;
        color: #97a0b3;
    }
    .hrTargetManage .totalNum{
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
        position:relative;
    }
    .hrTargetManage .paginationDiv{
        padding: 10px 0;
        margin-top: 20px;
    }
    .lookModal li{
        padding:  10px 40px 10px 20px;
    }
    .lookModal .title{
        float: left;
        width: 90px;
        text-align: right;
        font-weight: bold;
    }
    .lookModal .value{
        margin-left: 100px;
        border-bottom: 1px solid #eee;
        padding: 2px 10px;
        min-height: 24px;
        position: relative;
        top: 12px;
    }
    .editModal .editModalDiv{
        padding: 0 40px 0 20px;
    }
</style>
<style>
</style>
